<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/react.min.js" type="text/javascript" charset="utf-8"></script>
	    <script src="js/react-dom.min.js" type="text/javascript" charset="utf-8"></script>
	    <script src="js/babel.min.js" type="text/javascript" charset="utf-8"></script>
	    <style type="text/css">
	    	*{
	    		margin:0;
	    		padding:0;
	    		list-style:none;
	    		
	    	}
	    	li{
	    		border-bottom:1px solid blue;
	    		padding:10px 0;
	    		display:flex;
	    		justify-content:space-around;
	    	}
	    	.userIcon,.userIcon img{
	    		width:100px;
	    		height:100px;
	    		margin-right:15px;
	    	}
	    	.userInfo{
	    		flex:1;
	    	}
	    </style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<div class="userIcon">
						<img src="img/222.jpg" alt="" />
					</div>
					<div class="userInfo">
						<h4>标题</h4>
						<p>内容内容</p>
					</div>
				</li>
			</ul>
			
		</div>
	</body>
	<script type="text/babel">
		//头像组件
		class UserImg extends React.Component{
			render(){
				return(
					<div className="userIcon">
						<img src={this.props.img} alt="" />
					</div>
				)
			}
		}
		
		//评论信息组件
		class UserInfo extends React.Component{
			render(){
				return(
					<div className="userInfo">
							<h4>{this.props.info.name}</h4>
							<p>{this.props.info.info}</p>
					</div>
				)
			}
		}
		
		
		//评论组件
		class CommitList extends React.Component{
			
			render(){
				return(
					<li>
						<UserImg img={this.props.userdata.icon} />
						<UserInfo info={ this.props.userdata } />
					</li>
				)
			}
		}
		
		
		//评论列表组件
		class Commit extends React.Component{
			render(){
				
				console.log(this.props.data)
				var userList =this.props.data;
				var listMenu =userList.map((item)=><CommitList userdata={item} />)
			    return(
			    	<ul>
			    	   {listMenu}
			    	</ul>
			    )
			}
		}
		
		var list=[
		   {
		   	   icon:"222.jpg",
		   	   name:"john",
		   	   info:"beautiful"
		   },
		   {
		   	   icon:"333.jpg",
		   	   name:"Hery",
		   	   info:"handsome"
		   },
		   {
		   	   icon:"shuaige.jpg",
		   	   name:"H",
		   	   info:"Good"
		   }
		   
		
		
		]
	
		ReactDOM.render(<Commit data={list} />,document.getElementById("app"))
	</script>
</html>
